<!doctype html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset='utf-8'>
    <title>注册界面</title>
    <style type="text/css">
        body
        {
            margin:0;
            padding: 0;
            font-family: sans-serif;


            background-size: cover;
        }
        .box
        {
            position: absolute;
            top:50%;
            left: 85%;
            transform: translate(-50%,-50%);
            width:400px;
            padding: 40px;
            background: rgba(0,0,0,.8);
            box-sizing : border-box;
            box-shadow: 0 15px 25px rgba(0,0,0,.9);
            border-radius: 10px;
        }
        .box h2
        {
            margin:0 0 30px;
            padding: 0;
            color: #fff;
            text-align: center;
        }
        .box .inputBox
        {
            position: relative;
        }
        .box .inputBox input
        {
            width:100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            letter-spacing: 1px;
            margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            background: transparent;
        }
        .box .inputBox label
        {
            position: absolute;
            top:0;
            left: 0;
            padding: 10px 0;
            letter-spacing: 1px;
            font-size: 16px;
            color: #fff;
            pointer-events: none;
            transition: .5s;
        }
        .box .inputBox input:focus ~ label,
        .box .inputBox input:valid ~ label
        {
            top:-18px;
            left:0;
            color:#03a9f4;
            font-size: 12px;
        }
        .box input[type="submit"]
        {
            background: transparent;

            border: none;
            outline:none;
            color: #fff;
            background: #03a9f4;
            padding: 10px 20px;
            cursor:pointer;
            border-radius: 5px;
        }
        .m-button {
            border: none;
            outline:none;
            color: #fff;
            background: #03a9f4;
            padding: 10px 20px;
            cursor:pointer;
            border-radius: 5px;
            margin-left: 150px;
        }
        .m-button1{
            border: none;
            outline:none;
            color: #fff;
            background: #03a9f4;
            padding: 10px 20px;
            cursor:pointer;
            border-radius: 5px;
            margin-left: 20px;
        }

    </style>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/font-awesome.min.css}">
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>


</head>
<body style="background: url(../images/login.jfif)">

<div class="box" id="container" >
    <h2>用户注册</h2>

    <div class="inputBox">
        <input type="text" v-model="username" id="username" required autocomplete="off">
        <label>用户名</label>
    </div>
    <div class="inputBox">
        <input type="password" v-model="password"  id="password" required >
        <label>密码</label>
    </div>
    <div class="inputBox">
        <input type="text" v-model="nickname"  id="nickname" required autocomplete="off" >
        <label>用户昵称</label>
    </div>
    <div class="inputBox">
        <input type="text" v-model="email"  id="email" required autocomplete="off" >
        <label>邮箱</label>
    </div>
    <button  class="m-button1"  @click="onSubmit">注册</button>
    <button class="m-button" id="back" >返回</button>




</div>

</body>
<script type="application/javascript" src="../js/jquery-3.5.1.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let vm = new Vue({
        el:"#container",
        data:{
            username:"",
            password:"",
            nickname:"",
            email:"",
            flag:1,
        },
        methods:{
            onSubmit: function (){
                if (vm.username==null || vm.username==""){
                    this.$alert('请填写用户名', '提示', {
                        confirmButtonText: '确定',
                    });
                    vm.flag=0;
                }else if(vm.password==null || vm.password==""){
                    this.$alert('请填写密码', '提示', {
                        confirmButtonText: '确定',
                    });
                    vm.flag=0;
                }else if(vm.password.length<6||vm.password.length>15){
                    this.$alert('请保证密码长度在6-15位', '提示', {
                        confirmButtonText: '确定',
                    });
                    vm.flag=0;
                } else if(vm.nickname==null || vm.nickname==""){
                    this.$alert('请填写昵称', '提示', {
                        confirmButtonText: '确定',
                    });
                    vm.flag=0;
                }else if(vm.email==null || vm.email==""){
                    this.$alert('请填写邮箱', '提示', {
                        confirmButtonText: '确定',
                    });
                    vm.flag=0;
                }else {
                    vm.flag=1;
                }
                if (vm.flag==1){
                    axios({
                        url:"/regiest",
                        method:"post",
                        data: {
                            username:vm.username,
                            password:vm.password,
                            email:vm.email,
                            nickname:vm.nickname
                        },
                    }).then((res)=> {
                            console.log(res.data)
                            if (res.data.data == 1) {
                                console.log("111")


                                this.$alert('注册成功,3S后跳转', '提示', {
                                    confirmButtonText: '确定',

                                });
                                setTimeout(function () {
                                    window.location.href = ("/toLogin")
                                }, 3000)

                            } else if (res.data.data=="用户名已存在"){
                                this.$alert('用户名已存在', '提示', {
                                    confirmButtonText: '确定',

                                });
                                setTimeout(function () {
                                    window.location.reload();
                                }, 2000)

                            }else if (res.data.data=="用户昵称已存在"){
                                this.$alert('用户昵称已存在', '提示', {
                                    confirmButtonText: '确定',

                                });
                                setTimeout(function () {
                                    window.location.reload();
                                }, 2000)

                            }else {
                                this.$alert('网络错误', '提示', {
                                    confirmButtonText: '确定',

                                });
                                setTimeout(function () {
                                    window.location.href = ("/toRegiest")
                                }, 3000)
                            }
                        }
                    )
                }

            },
        }


    });


    $("#back").click(function (){
        window.history.back();
    })
</script>
</html>